<template>
	<view class="device-receive-record-layout">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
			<template #top>
				<!-- 分类菜单 -->
				<view class="menu-box">
					<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx',padding:'0 60rpx'}" lineColor="#5F56EF" @click="didSelectMenuItem"></uv-tabs>
				</view>
			</template>
			<view class="device-allocated-record-list">
				<view class="device-allocated-record-item" v-for="item in dataList" :key="item.id" @tap="showDetail(item)">
					<text>{{item.recvType == '1' ? '接收单号' : '退货单号'}}：{{item.id}}</text>
					<text>时间：{{item.allotTime}}</text>
					<text>数量：{{item.allotNum}}台</text>
					<text>政策：{{item.brandName}}-{{item.produceName}}-{{item.policyName}}</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getRecvTransferList } from '@/common/api/api.js'
	const menuList = ref([{ name: '接收明细', type: 1 }, { name: '退货明细', type: 2 }])
	const selectType = ref(1)
	const pagingRef = ref(null)
	const dataList = ref([])
	// 选择分类
	const didSelectMenuItem = (item) => {
		selectType.value = item.type
		dataList.value = []
		pagingRef.value.reload()
	}
	// 查看详情
	const showDetail = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/home/device-manager/device-receive-record/device-receive-record-detail/device-receive-record-detail?data=${data}`
		})
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.recvType = selectType.value
		const res = await getRecvTransferList(params, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.device-receive-record-layout {
		.menu-box {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			margin-top: 1px;
		}

		.device-allocated-record-list {
			padding: 30rpx;

			.device-allocated-record-item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				text:nth-child(n + 2) {
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
		}
	}
</style>